<!--水果生产经营实体情况调查-->
<style scoped>
.reportTable {
	width: 100%;
	text-align: center;
	border-collapse: collapse;
	font-size: 14px;
}

.reportTable>tr {
	line-height: 28px;
}

.reportTable>tr>td {
	border: 1px solid #000;
}

.reportTable>tr>td>input {
	width: 100%;
	border: none;
	text-align: center;
	line-height: 28px;
}

.reportTable>tr>td>span {
	color: green;
	font-size: 14px;
}

.reportTable>caption {
	font-size: 24px;
}

.ivu-tabs-tabpane {
	height: 450px;
	overflow: auto;
	overflow-x: auto;
}

.ivu-tabs-nav-container {
	font-size: 16px;
}

.ivu-modal-body {
	padding: 10px !important;
}

.ivu-modal-footer {
	padding: 10px !important;
}

.ivu-collapse-header {
	font-size: 16px;
}

thead {
	font-size: 16px;
}

th>.ivu-table-cell {
	font-size: 16px !important;
}

.tabletitle {
	margin-bottom: 15px;
	font-size: 16px !important;
}

.tabletitle>.ivu-form-item-content>input {
	float: right;
}
</style>
<template>
	<div>
		<div class="table">
			<row>
				<div class="divmenu">
					<i-col :lg="{span:2}" :md="{span:8}" :sm="{span:10}" :xs="{span:20}">
						<i-button size="large" @click="Add" type="primary" class="searchButton">
							<p class="title">
								<Icon type="plus-circled" size="20"></Icon>&nbsp;&nbsp;
								<span>新增</span>
							</p>
						</i-button>
					</i-col>
				</div>
			</row>
			<div class="divSearch" style="padding: 6px;">
				<!--搜索框-->
				<row>
					<i-col :lg="{span:1}" :md="{span:3}" :sm="{span:4}" :xs="{span:4}" class="searchLabel" style="padding: 6px;">
						<label>分组名称:</label>
					</i-col>
					<i-col :lg="{span:3}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}">
						<Select v-model="SearchModel.GroupCode" placeholder="全部" @on-change="initTableData()">
							<Option value="">全部</Option>
							<Option v-for="item in groupList" :value="item.GroupCode" :key="item.GroupCode">{{ item.GroupName }}</Option>
						</Select>
					</i-col>
					<i-col :lg="{span:1}" :md="{span:3}" :sm="{span:4}" :xs="{span:4}" class="searchLabel" style="padding: 6px;">
						<label>字典名称:</label>
					</i-col>
					<i-col :lg="{span:3}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}">
						<Input type="text" v-model="SearchModel.DictText" placeholder="请填写字典名称" class="searchInput"></Input>
					</i-col>
					<i-col :lg="{span:1}" :md="{span:3}" :sm="{span:4}" :xs="{span:4}" class="searchLabel" style="padding: 6px;">
						<label>状态:</label>
					</i-col>
					<i-col :lg="{span:3}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}">
						<Select v-model="SearchModel.Status" placeholder="请选择字典状态" class="searchInput" @on-change="initTableData()">
							<Option value="">全部</Option>
							<Option value="1">启用</Option>
							<Option value="0">禁用</Option>
						</Select>
					</i-col>
					<i-col :lg="{span:1}" :md="{span:3}" :sm="{span:4}" :xs="{span:4}">
						<Button icon="ios-search" type="ghost" @click="Search()" style="margin-left: 5px;background: linear-gradient(to bottom, #64c8ef 0%,#00a2e2 100%);color: #fff; border-radius: 3px;text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);">
							查询
						</Button>
					</i-col>
				</row>
			</div>
			<row>
				<!--数据表格-->
				<Col>
				<Table :context="self" ref="table" :stripe=true border :columns="columns1" :data="tabledatas" size="large" @on-select-all="selectAll()" @on-select="selectSingel()" :height="clientHeight">
				</Table>
				</Col>
			</row>
			<row>
				<!--分页插件-->
				<div class="dataTable">
					<i-col>
						<!-- <spin size="large"></spin> -->
						<Page style="float:right;margin: 5px 20px 5px 0;" :total="tableTotal" show-elevator show-sizer show-total placement="top" :page-size-opts='pageSizeOpts' :page-size="20" @on-change="changePage" @on-page-size-change="changePageSize">
						</Page>
					</i-col>
				</div>
			</row>
		</div>
		<!--数据字典编辑弹窗-->
		<Modal v-model="ShowModal" :mask-closable="false">
			<p style="display:none" slot="close" @click="cancel('DictModel')">
				<Icon type="close-circled" color="red" size="25"></Icon>
			</p>
			<p slot="header" class="title">
				<span style="font-size: 20px">数据字典编辑</span>
			</p>
			<Form ref="DictModel" :model="DictModel" :rules="DictRule" :label-width="80">
				<Form-item label="分组名称" prop="GroupName">
					<Input v-model="DictModel.GroupName" placeholder="请输入分组名称"></Input>
				</Form-item>
				<Form-item label="分组代码" prop="GroupCode">
					<Input v-model="DictModel.GroupCode" placeholder="请输入分组代码"></Input>
				</Form-item>
				<Form-item label="字典名称" prop="DictText">
					<Input v-model="DictModel.DictText" placeholder="请输入字典名称"></Input>
				</Form-item>
				<Form-item label="字典值" prop="DictValue">
					<Input v-model="DictModel.DictValue" placeholder="请输入字典值"></Input>
				</Form-item>
				<Form-item label="字典拼音" prop="PinYin">
					<Input v-model="DictModel.PinYin" placeholder="请输入字典拼音"></Input>
				</Form-item>
	
				<Form-item label="排序号" prop="Sort">
					<Input v-model="DictModel.Sort" placeholder="请输入排序号"></Input>
				</Form-item>
				<Form-item label="状态" prop="Status">
					<Select v-model="DictModel.Status" placeholder="请选择字典状态">
						<Option value="1">启用</Option>
						<Option value="0">禁用</Option>
					</Select>
				</Form-item>
				<Form-item label="描述" prop="Remark">
					<Input v-model="DictModel.Remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
				</Form-item>
			</Form>
			<div slot="footer">
				<Button @click="cancel('DictModel')">取消</Button>&nbsp;&nbsp;
				<Button type="primary" @click="handleSubmit('DictModel')">保存</Button>
			</div>
		</Modal>
	</div>
</template>
<script>
export default {
	data() {
		//数据验证对象
		const validateNum = (rule, value, callback) => {
			if (value.length != 0) {
				if (isNaN(value)) {
					callback(new Error('请输入数字'));
				}
				else {
					if (value < 0) {
						callback(new Error('最小值为0'));
					}
					else {
						if (value > 0) {
							var propertyName = rule.field;
							this.Heighlight[propertyName] = true;//动态修改高亮

						}
						else {
							var propertyName = rule.field;
							this.Heighlight[propertyName] = false;//动态修改高亮
						}
						callback();
					}
				}
			}
			else {
				callback(new Error('值不能为空'));
			}

		};
		return {
			self: this,
			groupList: [],//字典分组列表
			tableTotal: 0,//表格记录条数
			ShowModal: false,//model开关,针对form填报表格
			tabledatas: [],//表格数据
			clientHeight: window.innerHeight - 315,
			pageSizeOpts: [20, 30, 40, 50],
			columns1: [
				// {type: 'selection',width: 60,align: 'center'},
				{ title: '分组名称', key: 'GroupName' },
				{ title: '分组代码', key: 'GroupCode' },
				{ title: '字典名称', key: 'DictText' },
				{ title: '字典拼音', key: 'PinYin' },
				{ title: '字典数值', key: 'DictValue', ellipsis: true },
				{ title: '排序', key: 'Sort' },
				{
					title: '是否启用', key: 'Status', 
					render:(h,params)=>{
						if(params.row.Status == '1'){
							return `启用`;
						}else{
							return `禁用`;
						}
					}
				},
				{ title: '备注', key: 'Remark' },
				{
					title: '操作', key: 'action', width: 200, align: 'center',
					render: (h, params) => {
						return h('div', [
							h('Button', {
								class: { irefreshColor: true },
								props: {
									type: 'ghost', size: 'small', icon: 'ios-compose'
								},
								style: {
									marginRight: '5px'
								},
								on: {
									click: () => {
										this.Edit(params.index,params.row.Id)
									}
								}
							}, '编辑'),
							h('Button', {
								class: { ideleteColor: true },
								props: {
									type: 'ghost', size: 'small', icon: 'ios-trash-outline'
								},
								style: {
									marginRight: '5px'
								},
								on: {
									click: () => {
										this.Remove(params.index,params.row.Id)
									}
								}
							}, '删除'),
						])
					}
				}
			],
			SearchModel: {
				PageNumber: 1,//页码
				PageSize: 20,//页面数量
				GroupCode: '', DictText: '', PinYin: '', DictValue: '', Sort: '', Status: '', Remark: ''
			},
			DictModel: {//表单实体
				Id: 0, GroupName: '',
				GroupCode: '',
				DictText: '',
				PinYin: '',
				DictValue: '', Sort: '', Status: '', Remark: ''

			},
			//表单验证规则
			DictRule: {//表单验证规则
				GroupName: [{ required: true, message: '请填写分组名称', trigger: 'blur' }],
				GroupCode: [{ required: true, message: '请填写分组代码', trigger: 'blur' }],
				DictText: [{ required: true, message: '请填写字典名称', trigger: 'blur' }],
				DictValue: [{ required: true, message: '请填写字典值', trigger: 'blur' }],
				PinYin: [{ required: true, message: '请填写字典拼音', trigger: 'blur' }],
				Sort: [{ required: true, message: '请填写排序编号', trigger: 'blur' }],
				Status: [{ required: true, message: '请选择状态', trigger: 'change' }]
			}
		}
	},
	mounted: function () {
		const that = this;
		window.onresize = () => {//动态设置数据表的高度
			return (() => {
				that.clientHeight = window.innerHeight - 315;
			})()
		};
	},
	methods: {
		//获取下拉数据字典分组方法
		getGroupList() {
			var self = this;
			this.$http.get("Dict/GetGroupList").then(//获取字典分组列表
				function (res) {
					if (res.data.status == 1) {
						self.groupList = res.data.model;
					}
					else {
						self.$Modal.error({ title: "提示信息", content: "数据加载失败!!!" });
					}
				}
			);
		},
		Add: function () {//添加数据
			this.showModel();
		},
		showModel: function () {
			this.ShowModal = true;//显示对话框      
		},
		handleSubmit(name) {//数据提交
			var self = this;
			this.$refs[name].validate((valid) => {
				if (valid) {
					if (self.DictModel.Id == '') {//添加提交
						this.$http.post('Dict', self.DictModel).then(
							function (res) {
								if (res.data.status === 1) {
									self.initTableData();
									self.getGroupList();
									self.$Modal.success({ title: "提示信息", content: "数据字典添加成功" });
									self.ShowModal = false;
									self.restModel(name);//重置model
								}
								else {
									self.$Modal.warning({ title: "提示信息", content: "数据字典添加失败,请与管理员联系!" });
								}
							})
					}
					else {//提交编辑
						self.$http.put('Dict', self.DictModel).then(
							function (res) {
								if (res.data.status === 1) {
									self.initTableData();
									self.getGroupList();
									self.$Modal.success({ title: "提示信息", content: "数据编辑成功" });
									self.ShowModal = false;
									self.restModel(name);//重置model
								}
								else {
									self.$Modal.warning({ title: "提示信息", content: "数据编辑失败,请与管理员联系!" });
								}
								self.DictModel.Id = 0;
							})
					}
				}
			});
		},
		//查询方法
		Search() {
			this.initTableData();
		},
		cancel: function (name) {//关闭新增对话框
			this.$refs[name].resetFields();//关闭表单校验
			this.ShowModal = false;//关闭对话框
		},
		//批量删除
		Removes: function (id, index) {//批量删除
			this.$Modal.confirm({
				title: '提示信息',
				content: '<p>数据删除后不可恢复，确定要删除？</p>',
				onOk: () => {
					this.tabledata = [];
					this.$Message.info('数据删除成功');
					this.tableTotal = this.tabledata.length;
				}
			});
		},
		Remove: function (index, ID) {//删除单条数据
			var self = this;
			self.$Modal.confirm({
				title: '提示信息',
				content: '<p>数据删除后不可恢复，确定要删除？</p>',
				onOk: () => {
					this.$http.delete("Dict", { params: { id: ID } }).then(
						function (res) {
							if (res.data.status === 1) {
								self.$Modal.success({ title: "提示信息", content: "数据删除成功!!!" });
							}
							else {
								self.$Modal.error({ title: "提示信息", content: "数据删除失败!!!" });
							}
						}
					)
				}
			});
		},
		Edit: function (index, ID) {//编辑数据
			var self = this;
			this.$http.get("Dict", { params: { id: ID } }).then(//获取数据编辑项的值
				function (res) {
					if (res.data.status == 1) {
						self.DictModel = res.data.model;
						res.data.model.Id = ID;
					}
					else {
						self.$Modal.error({ title: "提示信息", content: "编辑数据加载失败!!!" });
					}
				}
			);
			this.showModel();
		},
		//全选
		selectAll: function () {
			alert("全选");
		},
		//单选
		selectSingel: function () {
			alert("单选");
		},
		exportData: function () {
			this.$refs.table.exportCsv({
				filename: '原始数据'
			});
		},
		//重置model
		restModel(modelname) {
			this.$refs[modelname].resetFields();//重置model
		},
		initTableData: function () {//初始化数据
			var self = this;
			this.$http.post("Dict/PostPageList", self.SearchModel).then(function (res) {
				self.tabledatas = [];
				if (res.data.status == 1) {
					self.tabledatas = res.data.rows;//数据初始化
					self.tableTotal = res.data.total;
				}
				else if (res.data.status == -1) {
					self.$Modal.warning({ title: '提示信息', content: res.data.message });
				}
				else if (res.data.status == -2) {
					self.$Modal.error({ title: '提示信息', content: "应用出现错误,请与管理员联系!" });
				}
				else {
					self.$Modal.error({ title: '提示信息', content: "应用程序出现未知错误!" });
				}
			});
		},
		changePage: function (PageNumber) {//改变页码事件
			this.SearchModel.PageNumber = PageNumber;
			this.initTableData();
		},
		changePageSize: function (PageSize) {//改变页面记录条数事件
			this.SearchModel.PageSize = PageSize;
			this.initTableData();
		}
	},
	created: function () { //初始化函数
		this.initTableData();
		this.getGroupList();
	}
}
</script>